<template>
  <div class="home">
    <van-tabs v-model="active">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <article-list
          :channel="item"
          @show-more="handleShowmore"
        ></article-list>
      </van-tab>
    </van-tabs>

    <!-- 频道列表开关 通过定位 -->
    <div class="bar-btn" @click="handleShowChannel">
      <van-icon name="wap-nav" />
    </div>

    <!-- 显示弹出层 -->
    <van-popup v-model="showMore" :style="{ width: '80%' }">
      <more-action @dislike="handleDislike" @report="report"></more-action>
    </van-popup>

    <!-- 展示频道管理页 -->
    <van-action-sheet v-model="show" title="频道管理">
      <channel-edit :active='active' @update-curChannel='chooseChannel' @update-active='updateActive'></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { reqDislikeArticles, reqReportArticles } from '@/api/article.js'
import ArticleList from './articleList'
import moreAction from './moreAction'
import ChannelEdit from './channelEdit'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    ArticleList,
    moreAction,
    ChannelEdit
  },
  data () {
    return {
      showMore: false,
      articleId: null,
      active: 0, // 点击了 谁就高亮
      show: false
    }
  },
  created () {
    this.getChannelsAsync()
  },
  computed: {
    ...mapState(['channels'])
  },
  methods: {
    ...mapActions(['getChannelsAsync']),
    // 点击展示删除页
    handleShowmore (articleId) {
      this.showMore = true
      this.articleId = articleId
      // console.log(this.articleId)
    },
    // 点击不喜欢删除
    async handleDislike () {
      console.log('不喜欢此内容', this.articleId)
      // 1.调用后端接口，告诉后台，这个文章我不喜欢
      await reqDislikeArticles(this.articleId)
      // console.log(res.data)
      // 2.关闭弹出层
      this.showMore = false
      // 3.将用户点击的那个文章删除
      this.$eventBus.$emit('del-article', {
        articleId: this.articleId,
        channelId: this.channels[this.active].id // 通过激活激活tab下标高亮获取频道的id
      })
    },
    // 点击反馈删除
    async report (typeId) {
      // console.log(typeId)
      // 1.发送请求
      await reqReportArticles(this.articleId, typeId)
      // 2.关闭弹层
      this.showMore = false
      // 3.删除文章
      this.$eventBus.$emit('del-article', {
        articleId: this.articleId,
        channelId: this.channels[this.active].id // 通过激活激活tab下标高亮获取频道的id
      })
    },
    handleShowChannel () {
      this.show = true
    },
    // 点击了 就高亮
    chooseChannel (index) {
      // console.log(index)
      this.active = index
      this.show = false
    },
    // 子传父点击删除项高亮项
    updateActive (index) {
      this.active = index
    }
  }
}
</script>
<style lang="scss" scoped>
// css3 中, 新出了两个单位, vh vw
// vh (viewport height) 100vh 就是一个屏幕的高
// vw (viewport width)  100vw 就是一个屏幕的宽
.home {
  height: 100vh;
  padding-top: 46px;
  box-sizing: border-box;
  overflow: hidden;
  .van-tabs {
    height: 100%;
    padding-top: 50px;
  }
  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
}
</style>

<style lang="scss">
// 深度作用选择器, /deep/ (less) scoped: 只能作用于当前组件模板中的内容, 无法往下渗透到子组件的!
// sass/scss     ::v-deep
.home {
  // 导航部分
  .van-tabs__wrap {
    position:fixed;
    top: 46px;
    left: 0px;
    // right 30px 是为了预留, 将来编辑频道的小图标的位置
    right: 30px;
  }
  .van-tabs__content {
    height: 100%;
    .van-tab__pane {
      height: 100%;
    }
  }
  .van-tabs__line {
    background-color: #3196fa;
  }
}
</style>
